<template>
  <div class="home-process-container">
    <div class="wraper flex-container">
      <div class="logo">
        <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/logo.png" alt="" />
      </div>
      <div class="tabs">
        <div
          class="item flex-container"
          v-for="(item, index) in tabs"
          :key="index"
          @click="switchTab(item, index)"
        >

          <div
            class="icon"
            v-if="activeIndex === index"
            @click.stop.prevent="goLastTab()"
          >
            <img
              class="extend"
              src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/active-left.png"
              alt=""
            />
          </div>
          <div :class="[activeIndex == index ? 'active-item' : '']">
            {{ item.name }}
          </div>
          <div
            class="icon"
            v-if="activeIndex == index"
            @click.stop.prevent="goNextTab()"
          >
            <img
              class="extend"
              src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/active-right.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="search flex-container">
        <i class="title"> 工作人员查询 </i>
        <div class="input-container flex-container">
          <input v-model="searchStr" class="input" type="text" placeholder="请输入工作人员姓名"/>
          <div class="search-btn" @click="handleMask(true)">查询</div>
        </div>
      </div>
    </div>
    <process-mask :data="userInfo" :isWhite="isWhite" :visible="showMask" @close="()=>{ showMask=false }"></process-mask>
  </div>
</template>

<script>
import processMask from "@/components/mask.vue";
import searchLists from "@/service/search";
export default {
  name: "home-process",
  data() {
    return {
      searchStr:'',
      isWhite:true,
      showMask: false,
      tabs: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "关于未来使命栏目",
          path: "/future",
        },
        {
          name: "栏目动态",
          path: "/column",
        },
        {
          name: "往期节目回顾",
          path: "/historyLists",
        },
        {
          name: "选题申请",
          path: "/application",
        },
        {
          name: "联系我们",
        },
      ],
      userInfo: {
        user_name: "",
        phone: "", //手机号
        profession: "", //职位
        job_number: "", //工号
        img_url: "", //头像
      },
      activeIndex: 0, // 当前展示页面
    };
  },
  methods: {
    async handleMask(bol) {
      if(this.searchStr){
        let res = await searchLists({ search_content: this.searchStr });
        if(!!res.result.user_info){
          this.isWhite = false
          this.userInfo = res.result.user_info
          this.showMask = bol;
          return
        }
        var el=document.querySelector('.el-message');
        if(!el) {
          this.$message.error(`未查询到人员资料`);//获取当前弹出的message容器
          var el=document.querySelector('.el-message');
          el.style.cssText=' top:40%;background:#000000;opacity:0.6;border-radius:6px;width:50px;min-width:250px;z-index:20'
          document.querySelector('.el-message__content').style.cssText='color:white'
          document.querySelector('.el-message__icon').style.cssText='color:white'
        }
        this.isWhite = true
        this.showMask = false;
      }
    },
    goLastTab() {
      this.activeIndex == 0
        ? (this.activeIndex = this.tabs.length - 1)
        : (this.activeIndex -= 1);
      this.$router.push(this.tabs[this.activeIndex].path);
    },
    goNextTab() {
      this.activeIndex == this.tabs.length - 1
        ? (this.activeIndex = 0)
        : (this.activeIndex += 1);
      this.$router.push(this.tabs[this.activeIndex].path);
    },
    switchTab(item, index) {
      if(index === 5){
        this.activeIndex = 0
        this.$router.push('/');
        
        setTimeout(()=>{
          document.querySelector("#homeFooter").scrollIntoView()
        })
        return
      }
      this.activeIndex = index;
      this.$router.push(item.path);
    },
  },
  components: {
    processMask,
  },
};
</script>

<style lang="less" scoped>
.flex-container {
  display: flex;
  align-items: center;
}
.home-process-container {
  flex: 0 0 auto;
  width: 100%;
  height: 75px;
  background: #a83539;
  .wraper {
    width: 1370px;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
    .logo {
      width: 98px;
      height: 30px;
    }
    .tabs {
      margin-left: 36px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
      display: flex;
      .item {
        margin: 0 15px;
        cursor: pointer;
        .icon {
          margin: 5px;
          width: 12px;
          height: 22px;
        }
        .active-item {
          font-weight: bold;
        }
      }
    }
    .search {
      .title {
        font-size: 25px;
        font-family: YouSheBiaoTiHei;
        font-weight: bold;
        color: #ffffff;
        margin-right: 20px;
      }
      .input-container {
        height: 35px;
        border: 1px solid #ffffff;
        border-radius: 18px;
        background: #a83539;
        padding: 0 15px;
        .input {
          width: 130px;
          border: none;
          outline: none;
          color: white;
          background: #a83539;
        }
        .search-btn {
          cursor: pointer;
          font-size: 18px;
          font-weight: bold;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
        ::-webkit-input-placeholder {
          font-family: Microsoft YaHei;
          font-size: 12px;
          font-weight: bold;
          color: #ffffff;
          opacity: 0.5;
        }
        ::-moz-placeholder {
          font-family: Microsoft YaHei;
          font-size: 12px;
          font-weight: bold;
          color: #ffffff;
          opacity: 0.5;
        }
        ::-ms-input-placeholder {
          font-family: Microsoft YaHei;
          font-size: 12px;
          font-weight: bold;
          color: #ffffff;
          opacity: 0.5;
        }
      }
    }
  }
}
.extend {
  width: 100%;
  height: 100%;
  display: block;
}
</style>